<template>
    <div class="register-container">
      <section class="register-form-container">
        <el-form ref="registerForm" 
          :model="registerForm" 
          :rules="loginRules" 
          class="register-form" 
          label-width="80px" 
          label-position="left"
          status-icon
          auto-complete="on">
          <h3 class="title">{{ $t('login.welcome') }}</h3>
          <div class="nva-container">
            <div class="bottom-border-box">
              <div class="content-box">
                <span class="nav-content">
                  {{ $t('login.registerNavTitle') }}
                </span>
              </div>
              <div class="bottom-line"></div>
            </div>
          </div>
          <el-form-item 
            :label="$t('login.userName')"
            prop="username">
            <el-input 
              v-model="registerForm.username"
              name="username" 
              type="text"
              auto-complete="off"
              :placeholder="$t('login.userNamePlaceHolder')"></el-input>
          </el-form-item>
          <el-form-item 
            :label="$t('login.validationCode')"
            prop="validationCode">
            <el-input 
              v-model="registerForm.validationCode"
              name="validationCode" 
              type="text"
              auto-complete="off"
              :placeholder="$t('login.validationCodePlaceHolder')"
              class="sms-code-input"></el-input>
            <el-button 
              :loading="smsCodeLoading" 
              type="primary" 
              class="sms-code-button" 
              @click.native.prevent="handleSmsCodeRequest" 
              :disabled="smsCodeDownCount !== 0">
              {{ getSmsCodeButtonText }}
            </el-button>
          </el-form-item>
          <el-form-item 
            :label="$t('login.password')"
            prop="password">
            <el-input 
              v-model="registerForm.password"
              name="password" 
              type="password"
              auto-complete="off"
              :placeholder="$t('login.passwordPlaceHolder')"></el-input>
          </el-form-item>
          <el-form-item 
            :label="$t('login.confirmPasswordPlaceHolder')"
            prop="confirmPassword">
            <el-input 
              v-model="registerForm.confirmPassword"
              name="confirmPassword" 
              type="password"
              auto-complete="off"
              :placeholder="$t('login.confirmPasswordPlaceHolder')"></el-input>
          </el-form-item>
          <el-form-item 
            :label="$t('login.name')"
            prop="name">
            <el-input 
              v-model="registerForm.name"
              name="name" 
              type="text"
              auto-complete="off"
              :placeholder="$t('login.namePlaceHolder')"></el-input>
          </el-form-item>
          <el-form-item 
            :label="$t('login.company')" 
            prop="company" 
            class="company-select">
            <el-select
              v-model="registerForm.company" 
              name="company" 
              :placeholder="$t('login.companyPlaceHolder')">
              <el-option v-for="company in allCompanies" :label="company.name" :value="company.value" :key="company.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item 
            :label="$t('login.idCard')"
            prop="idCard">
            <el-input 
              v-model="registerForm.idCard"
              name="idCard" 
              type="text"
              auto-complete="off"
              :placeholder="$t('login.idCardPlaceHolder')"></el-input>
          </el-form-item>
          <el-form-item class="submit-button-container">
            <el-button :loading="registerLoading" type="primary" class="submit-button" style="width:100%;" @click.native.prevent="handleRegister">
              {{ $t('login.register') }}
            </el-button>
          </el-form-item>
        </el-form>
    </section>
  </div>
</template>

<script>
import { isvalidUsername } from "@/utils/validate";

export default {
  name: "Register",
  components: {},
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!isvalidUsername(value)) {
        callback(new Error(this.$t("login.userNameValidationTips")));
      } else {
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value.length < 5) {
        callback(new Error(this.$t("login.passwordValidationTips")));
      } else {
        callback();
      }
    };
    return {
      registerForm: {
        username: '',
        password: '',
        validationCode: '',
        confirmPassword: '',
        name: '',
        idCard: ''
      },
      loginRules: {
        username: [
          {
            required: true,
            trigger: "blur",
            validator: validateUsername,
            message: this.$t("login.userNameRequired")
          }
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            validator: validatePass,
            message: this.$t("login.passwordRequired")
          }
        ],
        validationCode: [
          {
            required: true,
            trigger: "blur",
            message: this.$t("login.validationCodeRequired")
          }
        ],
        confirmPassword: [
          {
            required: true,
            trigger: "blur",
            validator: validatePass,
            message: this.$t("login.confirmPasswordRequired")
          }
        ],
        name: [
          {
            required: true,
            trigger: "blur",
            message: this.$t("login.nameRequired")
          }
        ],
        company: [
          {
            required: true,
            trigger: "blur",
            message: this.$t("login.companyRequired")
          }
        ],
        idCard: [
          {
            required: true,
            trigger: "blur",
            message: this.$t("login.idCardRequired")
          }
        ]
      },
      smsCodeLoading: false,
      smsCodeDownCount: 0,
      smsButtonText: this.$t("login.getValidationCode"),
      allCompanies: [{
        name: '公司A',
        value: '公司A'
      },{
        name: '公司B',
        value: '公司B'
      }],
      registerLoading: false,
    };
  },
  watch: {},
  methods: {
    showPwd() {
      if (this.pwdType === "password") {
        this.pwdType = "";
      } else {
        this.pwdType = "password";
      }
    },
    handleSmsCodeRequest() {
      this.smsCodeLoading = true;
      this.smsCodeDownCount = 60;
      const timmerId = setInterval(() => {
        this.smsCodeDownCount--;
        if (this.smsCodeDownCount <= 0) {
          if (timmerId) {
            clearInterval(timmerId);
          }
        }
      }, 1000);
      this.smsCodeLoading = false;
    },
    handleRegister() {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("Register", this.registerForm)
            .then(() => {
              this.loading = false;
              this.$router.push({ path: this.redirect || "/" });
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  },
  computed: {
    getEyeIcon() {
      return this.pwdType ? "eye" : "openeye";
    },
    getSmsCodeButtonText() {
      if (this.smsCodeDownCount > 0) {
        return this.$t("login.smsCodeWaitTips", {
          second: this.smsCodeDownCount
        });
      } else {
        return this.$t("login.getValidationCode");
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$dark_gray: #889aa4;
$light_gray: #eee;
$black: #000;
$bg: $light_gray;
$white: #fff;
$font_color: #606266;
$font_weight: 500;
$font_size: 14px;
@import "@/styles/variables.scss";
.register-container {
  display: flex;
  justify-content: center;
  height: 80%;
  width: 90%;
  background-color: $white;
  flex-grow: 1;
  margin: 10px 0;
  overflow: auto;
  .register-form-container {
    width: 100%;
    .register-form {
      width: 450px;
      max-width: 100%;
      padding: 15px 20px;
      margin: 10px auto;
      .sms-code-input {
        width: 57%;
      }
      .sms-code-button {
        padding: 12px 7px;
      }
      .company-select {
        .el-select {
          width: 100%;
        }
      }
      .submit-button-container {
        // display: flex;
        // justify-content: center;
        .el-form-item__content {
          // width: 90% !important;
          // margin-left: 0 !important;
          .submit-button {
            background-color: $themeColor;
            border-color: $themeColor;
          }
        }
      }
    }
    .tips {
      font-size: 14px;
      color: #fff;
      margin-bottom: 10px;
      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }
    .svg-container {
      padding: 3px 5px 3px 10px;
      color: $dark_gray;
      vertical-align: middle;
      width: 30px;
      display: inline-block;
      &_login {
        font-size: 24px;
      }
    }
    .title {
      font-size: 2em;
      font-weight: 400;
      color: $black;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select: none;
    }
    .nva-container {
      .bottom-border-box {
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
        position: relative;
        .content-box {
          border-bottom: 3px solid rgba(207, 63, 36, 0.9);
          padding-bottom: 6px;
          width: 180px;
          text-align: center;
          z-index: 2;
          .nav-content {
            color: $themeColor;
            font-size: 1.3em;
            // font-weight: $font_weight;
          }
        }
        .bottom-line {
          position: absolute;
          border-bottom: 1px solid #cccccc;
          width: 110%;
          bottom: 0px;
          transform: translateX(0%);
          z-index: 1;
        }
      }
    }
  }
}
</style>
